<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
        .title{
            text-align: center;
            font-size: 30px;
        }
        form{
            width: 550px;
            height: 400px;
            margin: 200px auto;
            background-color: rgba(178, 134, 45, 0.4);
        }
    </style>
</head>
<body>
    <!-- 
    onsublit 提交行为，返回true就会提交，false不会提交
    -->
    <form  method="post" action="http://localhost:8080/Day08_autoLogin_war_exploded/user/register">
        <div class="row">  
        </div>
            <div class="alert alert-primary title">新用户注册</div>
            <div class="form-group row">
                <label for="userName" class="col-sm-2 offset-sm-2 col-form-label">用户名</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="InputUserName" name="username" placeholder="请输入用户名" required>
                    <small class="userNamePromot">5-12位</small>
                </div>
            </div>
        <div class="form-group row">
            <label for="Password" class="col-sm-2 offset-sm-2 col-form-label">密码</label>
            <div class="col-sm-6">
                <input type="password" class="form-control" id="InputPassword" name="password" required>
                <small class="passWordPromot">密码6-12位</small>
            </div>
        </div>
        <div class="form-group row">
            <label for="PasswordAgain" class="col-sm-2 offset-sm-2 col-form-label">确认密码</label>
            <div class="col-sm-6">
                <input type="password" class="form-control" id="InputPasswordAgain"  required>
                <small class="passWordAgainPromot">两次密码一致</small>
            </div>
        </div>
        <button type="submit" class="btn btn-primary col-sm-2 offset-sm-4">提交</button>
    </form><br>
    <button class="btn111">哈哈</button>
    <script>
        const requestUserName = new XMLHttpRequest();
        const formObj = document.querySelector("form");
        const userNameObj= document.querySelector("#InputUserName");
        const userNamePromotObj=document.querySelector(".userNamePromot");
        const PasswordObj=document.querySelector("#InputPassword");
        const passWordPromotObj=document.querySelector(".passWordPromot");
        const PasswordAgainObj=document.querySelector("#InputPasswordAgain");
        const passWordAgainPromotObj=document.querySelector(".passWordAgainPromot");

        userNameObj.addEventListener("blur",function () {
            const regex = /^[A-Za-z0-9]{5,12}$/;
            if (userNameObj.value == "") {
                userNameObj.className="form-control";
                userNamePromotObj.className="userNamePromot";
                userNamePromotObj.innerText="请输入用户名(5-12位)";
            }
            else{
                if(regex.test(userNameObj.value)){
                    userNameObj.className="form-control is-valid";
                    userNamePromotObj.className="userNamePromot valid-feedback";
                    userNamePromotObj.innerText="账户可用";
                }else{
                    userNameObj.className="form-control is-invalid";
                    userNamePromotObj.className="userNamePromot invalid-feedback";
                    userNamePromotObj.innerText="输入正确的用户名";
                }    
            }
        })
        PasswordObj.addEventListener("blur",function(){
            if(PasswordObj.value==""){
                PasswordObj.className="form-control";
                passWordPromotObj.className="userNamePromot";
                passWordPromotObj.innerText="密码6-12位";
            }
            else{
                if(PasswordObj.value.length>=6&&PasswordObj.value.length<=12){
                    PasswordObj.className="form-control is-valid";
                    passWordPromotObj.className="userNamePromot valid-feedback";
                    passWordPromotObj.innerText="密码可用";
                }else{
                    PasswordObj.className="form-control is-invalid";
                    passWordPromotObj.className="userNamePromot invalid-feedback";
                    passWordPromotObj.innerText="密码不可用";
                }
            }
        })
        PasswordAgainObj.addEventListener("blur",function () {
            if (PasswordObj.value ==""||PasswordAgainObj.value=="") {
                PasswordAgainObj.className="form-control"
                passWordAgainPromotObj.className="userNamePromot";
                passWordAgainPromotObj.innerText="两次密码一致";
            }
            else {
                if (PasswordObj.value==PasswordAgainObj.value) {
                PasswordAgainObj.className="form-control is-valid"
                passWordAgainPromotObj.className="userNamePromot valid-feedback";
                passWordAgainPromotObj.innerText="两次密码一致";
            }else{
                PasswordAgainObj.className="form-control is-invalid";
                passWordAgainPromotObj.className="userNamePromot invalid-feedback";
                passWordAgainPromotObj.innerText="两次密码不一致";
            }
            }
        })
        function submitUserName(){
            return /^[A-Za-z0-9]{5,12}$/.test(userNameObj.value);
        }
        function submitPassword() {
            return PasswordObj.value == PasswordAgainObj.value
        }
        function isPassword() {
            return PasswordObj.value.length>=6&&PasswordObj.value.length<=12;
        }
        formObj.onsubmit = function (event) {
            event.preventDefault();
            if(submitUserName()==false){
                alert("用户名格式不正确，无法注册");
                return;
            }
            if(isPassword()==false){
                alert("密码格式不正确");
                return;
            }
            if(submitPassword()==false){
                alert("密码不一致");
                return ;
            }
            // const formData = new FormData(formObj);
                /*requestUserName.open('GET','http://localhost:8080/Day08_autoLogin_war_exploded/user/account?username='+userNameObj.value+'&password='+PasswordObj.value+'&passwordAgain='+PasswordAgainObj.value);
                requestUserName.send();*/
                const data = {
                    username: userNameObj.value,
                    password: PasswordObj.value,
                }
                requestUserName.open('POST','http://localhost:8080/Day08_autoLogin_war_exploded/user/account');
                requestUserName.setRequestHeader('Content-Type', 'application/json');
                requestUserName.send(JSON.stringify(data));
                requestUserName.onload = function () {
                const response = JSON.parse(requestUserName.responseText);
                if (response.msg == "用户名已存在") {
                    alert("用户名已存在");
                }
                else{
                    const requestRegister = new XMLHttpRequest();
                    requestRegister.open('POST','http://localhost:8080/Day08_autoLogin_war_exploded/user/register');
                    requestRegister.send(JSON.stringify(data));
                    requestRegister.onload = function () {
                            const registerResponse = JSON.parse(requestRegister.responseText);
                            if (registerResponse.msg == "注册成功") {
                                alert("注册成功");
                                window.location.href = "http://localhost:8080/Day08_autoLogin_war_exploded/login.html";
                            }else {
                                alert("注册失败");
                            }
                        }
                    }

            }
        }
    </script>
</body>
</html>